import React from 'react';
import ReactDOM from 'react-dom';
import qqqq from 'prop-types'
/* 
  static propsTypes = { 需要借助prop-types这个包来限制类型}
  static defaultProps = {默认值}
*/

class Button extends React.Component{
  render(){
    console.log(this.props)
    // this.props.children  就是 vue中的 slot
    return <button onClick={this.props.onClick123}>
        {this.props.children}
    </button>
  }
}
class Show extends React.Component{
  static propTypes = {
    text:qqqq.string.isRequired // text必传 且 是一个字符串
  }
  static defaultProps = {
    text:'默认值'
  }
  render(){
    // this.props.text = 666; // props中的属性 都是只读的；要改只能父组件更改
    return <h1>
        {this.props.text||''}
    </h1>
  }
}

class App extends React.Component {
   
    state = {
      count:100
    }
    add = ()=>{
      this.setState({
        count:this.state.count + 1
      })
    }
    minus = ()=>{
      console.log(this)
      this.setState({
        count:this.state.count - 1,
      })
    }
    qqq(){}
    render() {
      // 凡是再 组件上的行内属性 都是自定义属性；
        return <div className=''>
            <Show text={this.state.count}/>
            <Button onClick123={this.add}>++++++</Button>
            <Button onClick123={this.minus}>减少<b>-</b><span>-</span></Button>
        </div>;
    }
}

ReactDOM.render(<App/>,document.getElementById('root'))